<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图书管理系统</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .book-status-available {
            color: green;
        }
        .book-status-borrowed {
            color: red;
        }
        .table-container {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="container mt-4">
        <h1 class="text-center mb-4">图书管理系统</h1>
        
        <!-- 操作按钮 -->
        <div class="d-flex justify-content-center gap-2 mb-4">
            <button class="btn btn-primary" onclick="showAllBooks()">查看所有图书</button>
            <button class="btn btn-info" onclick="showBorrowRecords()">查看借阅记录</button>
            <button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#borrowModal">借书</button>
            <button class="btn btn-warning" data-bs-toggle="modal" data-bs-target="#returnModal">还书</button>
            <button class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#backupModal">备份数据库</button>
            <button class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#restoreModal">还原数据库</button>
        </div>

        <!-- 显示区域 -->
        <div id="contentArea" class="table-container">
            <!-- 内容将动态加载到这里 -->
        </div>

        <!-- 借书模态框 -->
        <div class="modal fade" id="borrowModal" tabindex="-1">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">借书</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <div class="mb-3">
                            <label class="form-label">图书ID</label>
                            <input type="number" class="form-control" id="borrowBookId">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">用户ID</label>
                            <input type="number" class="form-control" id="borrowUserId">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" onclick="borrowBook()">确认借书</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 还书模态框 -->
        <div class="modal fade" id="returnModal" tabindex="-1">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">还书</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <div class="mb-3">
                            <label class="form-label">借阅记录ID</label>
                            <input type="number" class="form-control" id="returnRecordId">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" onclick="returnBook()">确认还书</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 备份数据库模态框 -->
        <div class="modal fade" id="backupModal" tabindex="-1">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">备份数据库</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <!-- 数据库状态显示区域 -->
                        <div id="backupStatusArea"></div>
                        
                        <div class="mb-3">
                            <label class="form-label">备份说明</label>
                            <input type="text" class="form-control" id="backupDescription" placeholder="请输入备份说明">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" onclick="backupDatabase()">确认备份</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 还原数据库模态框 -->
        <div class="modal fade" id="restoreModal" tabindex="-1">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">还原数据库</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <!-- 数据库状态显示区域 -->
                        <div id="restoreStatusArea"></div>
                        
                        <!-- 显示备份记录列表 -->
                        <div id="backupRecordsList"></div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
    <script src="/js/main.js"></script>
</body>
</html> 